<template>
  <div class="edgeTableWrapper">
    <div class="title">连边样式</div>
    <el-table :data="$store.state.knowledgeMap.edgeConfig" max-height="236" :cell-style="{borderColor: '#F2F2F2',padding:'4px'}"
      style="width: 100%" class="config-table">
      <el-table-column type="selection" width="50" align="center">
      </el-table-column>
      <el-table-column :resizable="false" :show-overflow-tooltip="true" align="left" prop="attribute" label="选项"
        width="100">
      </el-table-column>
      <el-table-column :resizable="false" :show-overflow-tooltip="true" align="left" prop="color" label="颜色"
        width="100">
        <template slot-scope="scope">
          <el-color-picker v-model="scope.row.color" size="mini" @change="changeColor(scope.row)">
          </el-color-picker>
        </template>
      </el-table-column>
      <el-table-column :resizable="false" :show-overflow-tooltip="true" align="left" prop="edgeWidth" label="宽度"
        width="70">
        <template slot-scope="scope">
          <el-input v-model="scope.row.edgeWidth" placeholder="" @change="changeSize(scope.row)"></el-input>
        </template>
      </el-table-column>
      <el-table-column :resizable="false" :show-overflow-tooltip="true" align="left" prop="selected" label="箭头"
        width="70">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.selected" @change="changeArrow(scope.row)"></el-checkbox>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "edge-table",
    components: {},
    props: {},
    data() {
      return {
        // tableData: [{
        //     attribute: '所选连线',
        //     color: "#F4D03F",
        //     edgeWidth: "2",
        //     selected: true,
        //   }, {
        //     attribute: '地区',
        //     color: "#A2D9CE",
        //     edgeWidth: "2",
        //     selected: true,
        //   }, {
        //     attribute: '学校',
        //     color: "#2471A3",
        //     edgeWidth: "2",
        //     selected: true,
        //   },
        //   {
        //     attribute: '人物',
        //     color: "#EC7063",
        //     edgeWidth: "2",
        //     selected: true,
        //   },
        //   {
        //     attribute: '医院',
        //     color: "#2E4053",
        //     edgeWidth: "2",
        //     selected: true,
        //   }
        // ],
      }
    },
    created() {
    },
    methods: {
      changeColor(e) {
        this.$store.commit("knowledgeMap/change_targetEdge", e);
        this.$eventBus.$emit("updateEdgeColor");
      },
      changeSize(e) {
        this.$store.commit("knowledgeMap/change_targetEdge", e);
        this.$eventBus.$emit("updateEdgeWidth");
      },
      changeArrow(e) {
        this.$store.commit("knowledgeMap/change_targetEdge", e);
        this.$eventBus.$emit("updateEdgeArrow");
      }
    },
    watch: {
      "$store.state.knowledgeMap.edgeConfig": {
        handler: function (newll, old) {
        },
        deep: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 颜色选择器的样式
  /deep/ .el-table .cell.el-tooltip {
    padding-left: 6px;
    }

    /deep/ .el-color-picker__trigger {
    padding-left: 0;
    border: none;
    width: 16px;
    height: 16px;
    }

    /deep/ .el-color-picker__icon {
    display: none;
    }

    /deep/ .el-color-picker__color {
    width: 16px;
    height: 16px;
    border: none;
    }

    /deep/ .el-color-picker__color-inner {
    border-radius: 50%;
    border: none;
    }
  .edgeTableWrapper {
    .title {
      text-align: left;
      height: 21px;
      font-size: 16px;
      color: #333333;
      line-height: 21px;
    }

    /deep/ .el-table {
      .el-table td,
      .el-table th.is-leaf {
        border-bottom: none;
      }
    }

    .footWrapper {
      display: flex;
      margin-top: 10px;
      justify-content: space-between;

      div:nth-of-type(1) {
        height: 16px;
        font-size: 12px;
        color: #999999;
        line-height: 16px;
      }
    }
  }
</style>